<template>
  <div class="divBox">
    <el-row :gutter="24" class="dashboard-console-grid">
      <el-col v-bind="grid" class="ivu-mb mb10">
        <el-card :bordered="false">
          <router-link :to="{path:'/department/index'}">
            <div class="row-flex">
              <i class="el-icon-office-building" style="color:#898ced;"/>
              <div class="column-flex">
                <p class="nums">{{ viewData.depCount }}</p>
                <p class="title">部门数量</p>
              </div>
            </div>
          </router-link>
        </el-card>
      </el-col>
      <el-col v-bind="grid" class="ivu-mb">
        <el-card :bordered="false">
          <router-link :to="{path:'/person/index'}">
            <div class="row-flex">
              <i class="el-icon-user-solid" style="color:#fda865;"/>
              <div class="column-flex">
                <p class="nums">{{ viewData.personCount }}</p>
                <p class="title">人员数量</p>
              </div>
            </div>
          </router-link>
        </el-card>
      </el-col>
      <el-col v-bind="grid" class="ivu-mb">
        <el-card :bordered="false">
          <div class="row-flex" @click="modal=true">
            <i class="el-icon-folder-opened" style="color:#ff8e86;"/>
            <div class="column-flex">
              <p class="nums">{{ viewData.incCount }}</p>
              <p class="title">外出情况</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="dashboard-console-grid">
      <el-col v-bind="grid" class="ivu-mb mb10">
        <el-card :bordered="false">
          <router-link :to="{path:'/computer/laptopIndex'}">
            <div class="row-flex">
              <i class="el-icon-s-platform" style="color:#fdd22d;"/>
              <div class="column-flex">
                <p class="nums">{{ viewData.comCount }}</p>
                <p class="title">办公计算机数量</p>
              </div>
            </div>
          </router-link>
        </el-card>
      </el-col>
      <el-col v-bind="grid" class="ivu-mb">
        <el-card :bordered="false">
          <router-link :to="{path:'/tests/index'}">
            <div class="row-flex">
              <i class="el-icon-s-management" style="color:#898cec;"/>
              <div class="column-flex">
                <p class="nums">{{ viewData.testsCount }}</p>
                <p class="title">试验信息数量</p>
              </div>
            </div>
          </router-link>
        </el-card>
      </el-col>
      <el-col v-bind="grid" class="ivu-mb">
        <el-card :bordered="false">
          <router-link :to="{path:'/electronic/index'}">
            <div class="row-flex">
              <i class="el-icon-s-order" style="color:#26c6ff;"/>
              <div class="column-flex">
                <p class="nums">{{ viewData.electronicCount }}</p>
                <p class="title">个人电子设备数量</p>
              </div>
            </div>
          </router-link>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="dashboard-console-grid">
      <el-col v-bind="grid" class="ivu-mb">
        <el-card :bordered="false">
          <router-link :to="{path:'/modelType/index'}">
            <div class="row-flex">
              <i class="el-icon-s-order" style="color:#1e80ea;"/>
              <div class="column-flex">
                <p class="nums">{{ viewData.typeCount }}</p>
                <p class="title">型号数量</p>
              </div>
            </div>
          </router-link>
        </el-card>
      </el-col>
      <el-col v-bind="grid" class="ivu-mb">
        <el-card :bordered="false">
          <router-link :to="{path:'/workshop/index'}">
            <div class="row-flex">
              <i class="el-icon-s-flag" style="color:#01c8f2;"/>
              <div class="column-flex">
                <p class="nums">{{ viewData.plantCount }}</p>
                <p class="title">技术阵地/厂房数量</p>
              </div>
            </div>
          </router-link>
        </el-card>
      </el-col>
      <el-col v-bind="grid" class="ivu-mb">
        <el-card :bordered="false">
          <router-link :to="{path:'/protectionPoint/index'}">
            <div class="row-flex">
              <i class="el-icon-place" style="color:#f46b43;"/>
              <div class="column-flex">
                <p class="nums">{{ viewData.proCount }}</p>
                <p class="title">保护点数量</p>
              </div>
            </div>
          </router-link>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      :visible.sync="modal"
      title="外出情况"
      destroy-on-close
      :close-on-click-modal="false"
      width="1400px"
      top="40px"
    >
      <out
        v-if="modal"
        @hideEditDialog="hideTable"
      />
    </el-dialog>
  </div>
</template>
<script>
import { checkPermi } from '@/utils/permission'
import { viewModelApi } from '@/api/dashboard'
import out from '@/views/dashboard/out.vue';

export default {
  components: { out },
  data() {
    return {
      viewData: {},
      grid: {
        xl: 8,
        lg: 8,
        md: 6,
        sm: 8,
        xs: 8
      },
      modal:false,
    }
  },
  methods: {
    checkPermi,
    statisticsNum() {
      viewModelApi().then(async res => {
        this.viewData = res
      })
    },
    hideTable(){
      this.modal=false;
    }
  },
  mounted() {
    this.statisticsNum()
  }
}
</script>
<style lang="scss" scoped>
.ivu-mb {
  // margin-bottom: 10px;
}

::v-deep .el-card__body {
  padding: 10px 10px 10px 15px !important;
  cursor: pointer;
}

.divBox {
  padding: 0 20px !important;
}

.row-flex {
  display: flex;
  flex-direction: row !important;
  align-items: center;
}

.column-flex {
  display: flex;
  flex-direction: column !important;
  text-align: left;
  margin-left: 10px;

  .nums {
    font-weight: bold;
    font-size: 18px;
  }

  .title {
    color: #000;
    opacity: 0.5;
  }
}

.dashboard-console-grid {
  text-align: center;

  .ivu-card-body {
    padding: 0;
  }

  i {
    font-size: 32px;
  }

  a {
    display: block;
    color: inherit;
  }

  p {
    margin-top: 8px;
  }
}
</style>
